import type { Preset, SourceCodeTransformer } from 'unocss';

import { defineConfig, presetAttributify, presetIcons, presetUno, transformerDirectives, transformerVariantGroup } from 'unocss';

import { presetApplet, presetRemRpx, transformerApplet, transformerAttributify } from 'unocss-applet';

const isMp = process.env?.UNI_PLATFORM?.startsWith('mp-') ?? false;

const presets: Preset[] = [];
const transformers: SourceCodeTransformer[] = [];
const darkMode = !isMp ? 'class' : 'media';

if (isMp) {
    presets.push(presetApplet({ dark: darkMode }));
    presets.push(presetRemRpx()); // h-4 => 16 px => 1rem => 32rpx
    // 属性化模式 前缀 un- ，目前关闭，存在与其他组件或元素属性冲突情况
    transformers.push(transformerAttributify({ nonValuedAttribute: false, ignoreAttributes: ['block', 'fixed', 'color'] }));
    transformers.push(transformerApplet());
} else {
    presets.push(presetUno({ dark: darkMode }));
    presets.push(presetAttributify());
    presets.push(presetRemRpx({ mode: 'rpx2rem' }));
}

export default defineConfig({
    presets: [
        presetIcons({
            scale: 1.2,
            warn: true,
            extraProperties: {
                display: 'inline-block',
                'vertical-align': 'middle',
            },
        }),
        ...presets,
    ],
    transformers: [transformerDirectives(), transformerVariantGroup(), ...transformers],
    theme: {
        preflightRoot: isMp ? ['page,::before,::after'] : undefined,
    },
    rules: [
        ['p-safe', { padding: 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)' }],
        ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
        ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
        ['pl-safe', { 'padding-left': 'env(safe-area-inset-left)' }],
        ['pr-safe', { 'padding-right': 'env(safe-area-inset-right)' }],
        ['m-safe', { margin: 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)' }],
        ['mt-safe', { 'margin-top': 'env(safe-area-inset-top)' }],
        ['mb-safe', { 'margin-bottom': 'env(safe-area-inset-bottom)' }],
        ['ml-safe', { 'margin-left': 'env(safe-area-inset-left)' }],
        ['mr-safe', { 'margin-right': 'env(safe-area-inset-right)' }],
    ],
    shortcuts: [
        {
            'border-base': 'border border-gray-500_10',
            'z-tar-both': 'z-988',
            '_u_head-fixed': 'fixed top-0 left-0 w-full z-tar-both',
            _u_center: 'flex justify-center items-center',
        },
    ],
});
